<template>
  <div class="group-profile">
    <GroupProfileInfo />
    <div class="group-notice">
      <div class="group-profile-title">
        群通知
      </div>
      <div
        class="group-profile-button"
        @click="showGroupProfileInfo"
        title="查看群资料"
      >
        <i class="el-icon-more"></i>
      </div>
      <div class="group-notice-content" :title="groupNoticeContent">
        {{ groupNoticeContent }}
      </div>
    </div>
    <div class="group-member-profile">
      <div class="group-profile-title">
        群成员：{{ currentMemberList.length }}
      </div>
      <el-popover placement="top"  v-model="isAddGroupMemberVisible" v-if="isShowAddGroupMember">
        <el-input v-model="userID" placeholder="输入userID 按回车键" @keydown.enter.native="addGroupMember"></el-input>
        <div slot="reference" class="group-profile-button" title="添加群成员">
          <i class="el-icon-plus"></i>
        </div>
      </el-popover>
      <div class="group-member-list">
        <div class="member-profile" v-for="memberProfile in currentMemberList" :key="memberProfile.userID">
          <div class="meber-profile-item">
            <div class="member-avatar">
              <Avatar :src="memberProfile.avatar"></Avatar>
            </div>
            <div class="member-name" :title="memberProfile.userID">
              {{ memberProfile.nameCard || memberProfile.nick || memberProfile.userID }}
            </div>
            <div class="member-role" v-if="memberProfile.role !== 'Member'">
              <el-avatar 
                class="admin-avatar" 
                :src="memberProfile.role === 'Owner' ? require('../../../assets/image/owner.png') : require('../../../assets/image/admin.png')"
                :title="memberProfile.role === 'Owner' ? '群主' : '管理员'"
              ></el-avatar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import GroupProfileInfo from './GroupProfileInfo.vue';

export default {
  data(){
    return {
      isAddGroupMemberVisible: false,
      userID: ''
    }
  },
  components:{
    GroupProfileInfo
  },
  computed:{
    ...mapState({
      currentConversation: state => state.conversation.currentConversation,
      currentMemberList: state => state.group.currentMemberList
    }),
    groupNoticeContent(){
      return this.currentConversation.groupProfile.notification || this.currentConversation.groupProfile.introduction || '暂无群公告';
    },
    isShowAddGroupMember(){
      // 只有私有群支持添加群成员
      return this.currentConversation.subType === this.TIM.TYPES.GRP_PRIVATE;
    }
  },
  methods:{
    addGroupMember(){
      if(this.userID !== ''){
        const groupID = this.currentConversation.conversationID.replace('GROUP', '');
        this.$store.dispatch('addGroupMember',{ groupID, userIDList: [this.userID] });
        this.isAddGroupMemberVisible = false;
        this.userID = '';
      }
    },
    showGroupProfileInfo(){
      this.$store.commit('toggleIsGroupProfileInfoVisible',true);
    }
  }
}
</script>

<style scoped>
.group-profile{
  height: 100%;
  overflow: auto;
}
.group-notice{
  position: relative;
  height: 200px;
  border-bottom: 1px solid #f5f5f5;
}
.group-profile-title{
  padding-top: 10px;
  padding-left: 10px;
  font-weight: bold;
}
.group-profile-button{
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 10px;
}
.group-notice-content{
  color: gray;
  padding: 10px;
  font-size: 14px;
  line-height: 22px;
  height: 140px;
  overflow: scroll;
}
.group-member-profile{
  position: relative;
}
.group-member-list{
  padding: 10px;
}
.member-profile{
  padding-bottom: 3px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
}
.meber-profile-item{
  position: relative;
}
.member-avatar{
  float: left;
  padding-right: 6px;
  height: 20px;
  width: 20px;
}
.member-name{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member-role{
  position: absolute;
  right: -1px;
  top: -1px;
}
.admin-avatar{
  height: 20px;
  width: 20px;
  background-color: white;
}
</style>